<template>
	<view class="mycircle" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<u-tabs
			:lineColor="activeColor"
			itemStyle="height:88rpx"
			:activeStyle="{
				color: activeColor
			}"
			:inactiveStyle="{
				color: '#ACB4C7'
			}"
			:list="myqzList"
			style="padding-left: 20rpx;"
			@click="changeItem"
		></u-tabs>
		<view class="qzsum">
			共有
			<text>{{ qzList.length }}</text>
			个
		</view>
		<view class="circleDetails">
			<view class="fboxRow Ycenter" @click="goDetail(item)" v-for="(item, index) in qzList" :key="index">
				<image class="img_min" :src="item.groupAvatar" mode="aspectFill" />
				<view class="details">
					<p class="ellipsis1">{{ item.groupName }}</p>
					<view class="ellipsis1">
						<text v-if="item.isPublic != 1">非公开</text>
						<text>成员 {{ item.memberCount }} 人</text>
					</view>
				</view>
			<text class="bwfont bw-arrow-right img_right"></text>
			</view>
			<NotEmpty v-if="isShow" :height="200"></NotEmpty>
		</view>
	</view>
</template>

<script>
import { getMyGroup } from '@/api/mine.js';
export default {
	props: {},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			myqzList: [{ name: '我创建的', value: 1 }, { name: '我加入的', value: 0 }],
			qzList: [],
			isShow: false,
			qzList1: [],
			activeColor: '',
			inactiveColor: ''
		};
	},
	onLoad() {
		this.getMyData();
		uni.setNavigationBarTitle({
			title: `我的圈子`
		});
	},
	watch: {
		globalColor: {
			handler(newVal) {
				if (newVal) {
					this.activeColor = newVal['selectedFontColor'];
					this.inactiveColor = newVal['contentFontLightColor'];
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		// 获取圈子数据
		async getMyData() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			await getMyGroup({})
				.then(res => {
					this.qzList1 = res.data;
					if (this.qzList1.length == 0) {
						this.isShow = true;
					}
					this.changeItem({ value: 1 });
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 跳转圈子详情
		goDetail(item) {
			this.$pageTo('/circle?id=' + item.groupId);
		},
		// 圈子切换
		changeItem(data) {
			if (data.value == 0) {
				// 我加入的圈子
				this.qzList = this.qzList1.filter(item => item.identity == '1');
			} else {
				// 我创建的圈子
				this.qzList = this.qzList1.filter(item => item.identity == '0');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.ellipsis1 {
	overflow: hidden;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.mycircle {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--viewBgColor);
	.qzsum {
		padding: 20rpx 20rpx 20rpx 40rpx;
		color: var(--contentFontDarkColor);
		border-bottom: 1px solid var(--viewDivisionColor);
		> text {
			color: var(--contourButtonTextColor);
			margin: 0 10rpx;
		}
	}
	.circleDetails {
		flex: 1;
		padding: 20rpx 40rpx;
		.fboxRow {
			border-bottom: 1px solid var(--viewDivisionColor);
			padding: 30rpx 0;
		}
		.img_min {
			width: 88rpx;
			height: 88rpx;
			margin-right: 15rpx;
			border-radius: 8rpx;
		}
		.img_right {
			font-size: 24rpx;
			color: var(--contentFontFourColor);
		}
		.details {
			flex: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			text {
				margin-right: 20rpx;
				color: #6b707c;
				font-size: 26rpx;
			}
			> p {
				margin-bottom: 15rpx;
				color: var(--titleFontColor);
				font-weight: 500;
				font-size: 30rpx;
			}
		}
	}
}
</style>
